<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                <el-button type="primary" :icon="Plus" @click="$emit('handleDialogOpen', true)">新增</el-button>
                <el-button type="danger" :icon="Delete" @click="$emit('deleteCurbList')">删除</el-button>
            </el-col>
            <el-col :span="14" style="text-align: right;">
                <el-space size="10">
                    <div class="search">
                        <el-input v-if="!isCollapsed" v-model="input" style="width: 320px" placeholder="请输入停车场"
                            clearable :icon="Search">
                            <template #append>
                                <el-button :icon="Search" @click="$emit('searchCurb', input)" />
                            </template></el-input>
                    </div>
                    <el-button type="primary" @click="toggleCollapse">
                        <span>高级筛选</span>
                        <el-icon class="el-icon--right">
                            <el-icon v-if="isCollapsed">
                                <CaretTop />
                            </el-icon>
                            <el-icon v-else>
                                <CaretBottom />
                            </el-icon>
                        </el-icon>
                    </el-button>
                </el-space>
            </el-col>
        </el-row>
        <!-- 折叠框 -->
        <div v-if="isCollapsed">
            <el-form :inline="true" ref="formRef" style="max-width: 600px" :model="formInline" class="demo-ruleForm">
                <el-form-item label="age" prop="age">
                    <el-input v-model="formInline.age" type="text" placeholder="Approved by" />
                </el-form-item>
                <el-form-item label="age1" prop="age1">
                    <el-input v-model="formInline.age1" placeholder="Approved by" />
                </el-form-item>
                <el-form-item label="user" prop="user">
                    <el-input v-model="formInline.user" placeholder="Approved by" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { Plus, Delete, Search, CaretTop, CaretBottom } from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()

const isCollapsed = ref(false);
const input = ref('')
const formInline = reactive({
    age: '',
    user: '',
    age1: ''
})
// 弹出下拉
const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value;
}
// 提交表单数据
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 清空表单数据
const resetForm = (formEl: FormInstance | undefined) => {
    console.log(formEl);
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}


.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>